<template>
  <div class="house">
       <el-row :gutter="20">
            <el-col :span="12">
                 <div class="newsbox">
                     <nuxt-link class="title" target="_blank" to="/column/touzicelue">
                        <span>投资策略</span>
                        <span>查看更多 ></span>
                     </nuxt-link>
                      <ul>
                        <li class="newsdetail" v-for="(item,index) in newslist1" :key="index">
                                <nuxt-link target="_blank" :to="'/post/' + item.pid">
                                    {{item.name}}
                                </nuxt-link>                               
                                <span>{{item.createtime.slice(0,11)}}</span>
                        </li>
                      </ul>
                 
                 </div>
            </el-col>
            <el-col :span="12">
                   <div class="newsbox">
                     <nuxt-link class="title" target="_blank" to="/column/caijingtoutiao">
                        <span>财经头条</span>
                        <span>查看更多 ></span>
                     </nuxt-link>
                      <ul>
                        <li class="newsdetail" v-for="(item,index) in newslist2" :key="index">
                                <nuxt-link target="_blank" :to="'/post/' + item.pid">
                                    {{item.name}}
                                </nuxt-link>                               
                                <span>{{item.createtime.slice(0,11)}}</span>
                        </li>
                      </ul>
                 
                 </div>
            </el-col>
         </el-row>
  </div>
</template>


<script>
export default {
  props: {
    newslist1:{
      type:Array,
      default:function(){
        return []
      }
    },
    newslist2:{
      type:Array,
      default:function(){
        return []
      }
    }
  }

};
</script>

<style scoped>
.house{
    margin: 20px 0;
}
.newsbox{
    padding: 20px;
    background: white;
    box-sizing: border-box;
}
.title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
    border-bottom: 1px solid #e6e6e6;
    margin-bottom: 20px;
}
.title span:nth-child(1){
    color: #cd9c54;
    font-size: 24px;
}
.title span:nth-child(2){
    color: #333;
    font-size: 16px;
}
.title span:nth-child(2):hover{
    color: #cd9c54;
}
.newsdetail{
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    color: #333;
    height: 50px;
    line-height: 50px;
}
.newsdetail:hover{
    color: #cd9c54;
}
.newsdetail a{
    width: 420px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>

